$(function () {
    let layer = layui.layer
    // 渲染页面   // 获取文章分类的列表
    function initArtCateList() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success: res => {
                // 调用template函数
                const htmlStr = template('tpl-table', res)
                // 渲染页面
                $('tbody').html(htmlStr)
            }
        });
    }
    initArtCateList();

    // 添加部分
    var indexAdd = null
    // 在按钮的点击事件中，通过 `layer.open()` 展示弹出层
    $('#btnAddCate').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#dialog-add').html()
        });

    });
    // 通过事件委派方式的方式，监听添加表单的提交事件
    $('body').on('submit', '#form-add', function (e) {
        e.preventDefault()
        $.ajax({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize(),
            success: res => {
                if (res.status !== 0) return layer.msg('添加图书失败');
                initArtCateList();
                layer.msg('新增分类成功！')
                // 根据索引，关闭对应的弹出层
                layer.close(indexAdd);
            }
        })
    });

    // 删除部分
    // 通过事件委派的方式 监听点击删除事件
    $('tbody').on('click', '.btn-delete', function (index) {
        var id = $(this).attr('data-id');
        // id小于2  后端要求不允许删除
        if (id < 2) return layer.msg('不能删除')
        // 提示用户是否要删除
        layer.confirm('确认要删除吗?', {
            icon: 3,
            title: '提示'
        }, function (index) {
            $.ajax({
                method: 'GET',
                url: '/my/article/deletecate/' + id,
                success: res => {
                    // console.log(res);
                    if (res.status !== 0) return layer.msg(res.message);
                    layer.msg('删除图书成功');
                    // 关闭确认框
                    layer.close(index);
                    // 重新渲染页面
                    initArtCateList();
                }
            })
        })
    });

    // 修改部分
    // 通过事件委派  添加  点击修改文章的事件
    var indexEdit = null
    var form = layui.form;
    $('tbody').on('click', '.btn-edit', function () {
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: $('#dialog-edit').html()
        });

        // 获取点击的列 对应的自定义属性id
        var id = $(this).attr('data-id');
        // id小于2  后端要求不允许添加
        if (id < 2) return layui.msg('不能添加')
        // console.log(id);
        // 发送请求  得到数据
        $.ajax({
            method: 'GET',
            url: '/my/article/cates/' + id,
            success: res => {
                // 调用layui的方法 一次性填充数据到表单
                form.val('form-edit', res.data);
            }
        })
    });

    // 通过事件委派方式的方式，监听修改表单的提交事件
    $('body').on('submit', '#form-edit', function (e) {
        e.preventDefault()
        $.ajax({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize(),
            success: res => {
                if (res.status !== 0) return layer.msg(res.message);
                // 渲染页面
                initArtCateList();
                layer.msg('更新分类成功！')
                // 根据索引，关闭对应的弹出层
                layer.close(indexEdit);
            }
        })
    });
})